<template>
  <div class="tp-box">
    <a-drawer
      :visible="props.visible"
      :width="props.width"
      :closable="props.closable"
      :destroyOnClose="props.destroyOnClose"
      @close="handleClose"
    >
    <template #title>
        <div class="title-detail" style="float:left">
          <Tooltip placement="top">
            <template #title>
              <span>{{ getTipTitle }}</span>
            </template>
            <h3>{{ getTitle }}</h3>
          </Tooltip>
          <a-space direction="vertical" :size="12">
            <!-- <a-range-picker v-model:value="value4" :format="dateFormat" /> -->
          </a-space>
          &nbsp;&nbsp;&nbsp;&nbsp;
         
        </div>
        <div style="float: right">
          <a-space style="float: right; margin-right: 10px">
            <a-button type="primary" @click="handleExport"> 导出 </a-button>
          </a-space>
          &nbsp;&nbsp;&nbsp;&nbsp;
        </div>
      </template>
      <!-- :scroll="{ x: 1500, y: 600 }" -->
      <a-table
        :columns="computedTableColumn"
        :data-source="computedTableData"
        :page-size-options="pageSizeOptions"
        :loading="loading"
        bordered
        :pagination="false"
        size="middle"
        :scroll="{ x: 'calc(700px + 50%)', y: props.detailTableHeight }"
      >
        <!-- <template #action>
          <a>action</a>
        </template> -->
      </a-table>
      <div class="pagination">
        <a-pagination
          show-size-changer
          v-model:current="pageIndex"
          v-model:pageSize="pageSize"
          :total="total"
          @show-size-change="onShowSizeChange"
        />
      </div>
    </a-drawer>
    <VillageDetail
      v-model:vvisible="vvisible"
      title="抽屉标题"
      :width="1500"
      :detailTableHeight="detailTableHeight"
      :vclosable="true"
      :vdestroyOnClose="true"
      :data="detailData"
      :vdetailParams="vdetailParams"
      :vcurrentTitle="v_currentTitle"
      @close="handleVillageClose"
    >
      <!-- <p>抽屉内容</p> -->
    </VillageDetail>
    <DetailYhDrawer
      v-model:visible="yhvisible"
      title="抽屉标题"
      :width="1500"
      :yhdetailTableHeight="yhdetailTableHeight"
      :yhclosable="true"
      :yhdestroyOnClose="true"
      :yhdata="yhdetailData"
      :yhdetailParams="yhdetailParams"
      :yhcurrentqx="yhcurrentqx"
      :yhcurrentTitle="yhcurrentTitle"
      @close="handleyhClose"
    >
       <!-- <p>抽屉内容</p> -->
      </DetailYhDrawer>
  </div>
</template>
<script setup lang="ts">
  import { Tooltip } from 'ant-design-vue';
  import { ref, computed, onMounted, watch } from 'vue';
  import { getCheckTownshipYhList } from '/@/api/demo/system';
  import VillageDetail from '../component/detail.vue';
  import DetailYhDrawer from '../component/detailYhDrawer.vue';
  import { useGlobSetting } from '/@/hooks/setting';
  import { useUserStore } from '/@/store/modules/user';
  import { downloadByUrl } from '/@/utils/file/download';
import { Row } from 'ant-design-vue/lib/grid';
  //   import Detail from './component/detailDrawer.vue';
  const userStore = useUserStore();
  const globSetting = useGlobSetting();
  // 表格的 ref Dom名称
  const visible = ref(false);
  const vvisible = ref(false);
  let detailData = ref<any[]>([]);
  let vdetailParams = ref({}); // 详情参数
  let detailTableHeight = ref<number>(0); // 表格高度
  let v_currentTitle = ref({});

  const yhvisible = ref(false);
  let yhdetailData = ref<any[]>([]);
  let yhdetailParams = ref({}); // 详情参数
  let yhcurrentTitle = ref({});
  let yhdetailTableHeight = ref<number>(0); // 表格高度
  // 默认传过来的值q
  const props = defineProps({
    visible: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: '',
    },
    width: {
      type: Number,
      default: 256,
    },
    detailTableHeight: {
      type: Number,
      default: 600,
    },
    hzfs: {
      type: String,
      default: '',
    },
    closable: {
      type: Boolean,
      default: true,
    },
    data: {
      type: Array,
      default: () => [],
    },
    detailParams: {
      type: Object,
      default: () => {},
    },
    currentXzqdmname: {
      type: String,
      default: '',
    },
    currentTitle: {
      type: String,
      default: '',
    },
    wscolsList: {
      type: Array,
      default: () => [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
    },
    destroyOnClose: {
      type: Boolean,
      default: true,
    },
    onClose: {
      type: Function as PropType<() => void>,
      default: () => {},
    },
  });
  let pageIndex = ref(1);
  let pageSize = ref(100);
  let loading = ref(false);
  const pageSizeOptions = ref<string[]>(['100', '200', '300']);
  let tableSource = ref<any>([]);
  let total = ref(0);
  const columns = [
    { title: '序号', width: 50, dataIndex: 'index', key: 'index', align: 'center', fixed: 'left' },
    {
      title: '乡镇/街道',
      dataIndex: 'town',
      key: 'town',
      align: 'center',
      width: 170,
      customCell: (row, index, column) => {
        let isNoHzyh = row.town !== '汇总' ? true : false;
        let style = 'cursor:pointer;text-decoration: underline; color: blue;';
        let isNoZero = row[column.key] !== 0 ? true : false;
        return {
          style: `${isNoHzyh === true && isNoZero ? style : ''}`,
          class: 'cell-hover',
          onClick: async () => {
            getDetailData(row, index, column, isNoHzyh, isNoZero);
          },
        };
      },
    },
    {
        title: '汇总',
        children: [
          {
            title: '隐患总数',
            dataIndex: 'yhtotal',
            key: 'yhtotal',
            width: 100,
            align: 'center',
            customCell: (row, index, column) => {
              let isNoHzyh = row.xzq !== '汇总' ? true : false;
              let style = 'cursor:pointer;text-decoration: underline; color: blue;';
              let isNoZero = row[column.key] !== 0 ? true : false;
              return {
                style: `${isNoHzyh === true && isNoZero ? style : ''}`,
                class: 'cell-hover',
                onClick: async () => {
                  getDetailYhData(row, index, column, isNoHzyh, isNoZero, 'yhtotal', '隐患汇总', 'yh');
                },
              };
            },
          },
          {
            title: '整改数量',
            dataIndex: 'zgtotal',
            key: 'zgtotal',
            width: 100,
            align: 'center',
            customCell: (row, index, column) => {
              let isNoHzyh = row.xzq !== '汇总' ? true : false;
              let style = 'cursor:pointer;text-decoration: underline; color: blue;';
              let isNoZero = row[column.key] !== 0 ? true : false;
              return {
                style: `${isNoHzyh === true && isNoZero ? style : ''}`,
                class: 'cell-hover',
                onClick: async () => {
                  getDetailYhData(row, index, column, isNoHzyh, isNoZero,'zgtotal','整改隐患汇总','zg');
                },
              };
            },
          },
          {
            title: '剩余总数',
            dataIndex: 'sytotal',
            key: 'sytotal',
            width: 100,
            align: 'center',
            customCell: (row, index, column) => {
              let isNoHzyh = row.xzq !== '汇总' ? true : false;
              let style = 'cursor:pointer;text-decoration: underline; color: blue;';
              let isNoZero = row[column.key] !== 0 ? true : false;
              return {
                style: `${isNoHzyh === true && isNoZero ? style : ''}`,
                class: 'cell-hover',
                onClick: async () => {
                  getDetailYhData(row, index, column, isNoHzyh, isNoZero,'sytotal','剩余隐患汇总','sy');
                },
              };
            },
          },
        ],
        align: 'center',
        width: 170,
      },
    {
      title: '电动自行车、电动平衡车及其蓄电池在室内及安全出口处停放、充电',
      children: [
        {
          title: '隐患总数',
          dataIndex: 'use_electric_bicycle',
          key: 'use_electric_bicycle',
          width: 100,
          align: 'center',
          customCell: (row, index, column) => {
            let isNoHzyh = row.town !== '汇总' ? true : false;
            let style = 'cursor:pointer;text-decoration: underline; color: blue;';
            let isNoZero = row[column.key] !== 0 ? true : false;
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              onClick: async () => {
                getDetailYhData(row, index, column, isNoHzyh, isNoZero,'use_electric_bicycle','电动自行车、电动平衡车及其蓄电池在室内及安全出口处停放、充电','yh');
              },
            };
          },
        },
        {
          title: '整改数量',
          dataIndex: 'use_electric_bicycle_zgcount',
          key: 'use_electric_bicycle_zgcount',
          width: 100,
          align: 'center',
          customCell: (row, index, column) => {
            let isNoHzyh = row.town !== '汇总' ? true : false;
            let style = 'cursor:pointer;text-decoration: underline; color: blue;';
            let isNoZero = row[column.key] !== 0 ? true : false;
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              onClick: async () => {
                getDetailYhData(row, index, column, isNoHzyh, isNoZero,'use_electric_bicycle','电动自行车、电动平衡车及其蓄电池在室内及安全出口处停放、充电','zg');
              },
            };
          },
        },
        {
          title: '剩余总数',
          dataIndex: 'use_electric_bicycle_sycount',
          key: 'use_electric_bicycle_sycount',
          width: 100,
          align: 'center',
          customCell: (row, index, column) => {
            let isNoHzyh = row.town !== '汇总' ? true : false;
            let style = 'cursor:pointer;text-decoration: underline; color: blue;';
            let isNoZero = row[column.key] !== 0 ? true : false;
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              onClick: async () => {
                getDetailYhData(row, index, column, isNoHzyh, isNoZero,'use_electric_bicycle','电动自行车、电动平衡车及其蓄电池在室内及安全出口处停放、充电','sy');
              },
            };
          },
        },
      ],
      align: 'center',
      width: 170,
    },
    {
      title: '在公共区域、租住房间内、地下室使用瓶装液化石油气',
      children: [
        {
          title: '隐患总数',
          dataIndex: 'use_bottled_liquefied_gas',
          key: 'use_bottled_liquefied_gas',
          width: 100,
          align: 'center',
          customCell: (row, index, column) => {
            let isNoHzyh = row.town !== '汇总' ? true : false;
            let style = 'cursor:pointer;text-decoration: underline; color: blue;';
            let isNoZero = row[column.key] !== 0 ? true : false;
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              onClick: async () => {
                getDetailYhData(row, index, column, isNoHzyh, isNoZero,'use_bottled_liquefied_gas','在公共区域、租住房间内、地下室使用瓶装液化石油气','yh');
              },
            };
          },
        },
        {
          title: '整改数量',
          dataIndex: 'use_bottled_liquefied_gas_zgcount',
          key: 'use_bottled_liquefied_gas_zgcount',
          width: 100,
          align: 'center',
          customCell: (row, index, column) => {
            let isNoHzyh = row.town !== '汇总' ? true : false;
            let style = 'cursor:pointer;text-decoration: underline; color: blue;';
            let isNoZero = row[column.key] !== 0 ? true : false;
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              onClick: async () => {
                getDetailYhData(row, index, column, isNoHzyh, isNoZero,'use_bottled_liquefied_gas','在公共区域、租住房间内、地下室使用瓶装液化石油气','zg');
              },
            };
          },
        },
        {
          title: '剩余总数',
          dataIndex: 'use_bottled_liquefied_gas_sycount',
          key: 'use_bottled_liquefied_gas_sycount',
          width: 100,
          align: 'center',
          customCell: (row, index, column) => {
            let isNoHzyh = row.town !== '汇总' ? true : false;
            let style = 'cursor:pointer;text-decoration: underline; color: blue;';
            let isNoZero = row[column.key] !== 0 ? true : false;
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              onClick: async () => {
                getDetailYhData(row, index, column, isNoHzyh, isNoZero,'use_bottled_liquefied_gas','在公共区域、租住房间内、地下室使用瓶装液化石油气','sy');
              },
            };
          },
        },
      ],
      align: 'center',
      width: 170,
    },
    // 居住 商业
    {
      title: '疏散走道、楼梯间、安全出口处堆放物品影响人员疏散',
      children: [
        {
          title: '隐患总数',
          dataIndex: 'use_stacked_items',
          key: 'use_stacked_items',
          width: 100,
          align: 'center',
          customCell: (row, index, column) => {
            let isNoHzyh = row.town !== '汇总' ? true : false;
            let style = 'cursor:pointer;text-decoration: underline; color: blue;';
            let isNoZero = row[column.key] !== 0 ? true : false;
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              onClick: async () => {
                getDetailYhData(row, index, column, isNoHzyh, isNoZero,'use_stacked_items','疏散走道、楼梯间、安全出口处堆放物品影响人员疏散','yh');
              },
            };
          },
        },
        {
          title: '整改数量',
          dataIndex: 'use_stacked_items_zgcount',
          key: 'use_stacked_items_zgcount',
          width: 100,
          align: 'center',
          customCell: (row, index, column) => {
            let isNoHzyh = row.town !== '汇总' ? true : false;
            let style = 'cursor:pointer;text-decoration: underline; color: blue;';
            let isNoZero = row[column.key] !== 0 ? true : false;
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              onClick: async () => {
                getDetailYhData(row, index, column, isNoHzyh, isNoZero,'use_stacked_items','疏散走道、楼梯间、安全出口处堆放物品影响人员疏散','zg');
              },
            };
          },
        },
        {
          title: '剩余总数',
          dataIndex: 'use_stacked_items_sycount',
          key: 'use_stacked_items_sycount',
          width: 100,
          align: 'center',
          customCell: (row, index, column) => {
            let isNoHzyh = row.town !== '汇总' ? true : false;
            let style = 'cursor:pointer;text-decoration: underline; color: blue;';
            let isNoZero = row[column.key] !== 0 ? true : false;
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              onClick: async () => {
                getDetailYhData(row, index, column, isNoHzyh, isNoZero,'use_stacked_items','疏散走道、楼梯间、安全出口处堆放物品影响人员疏散','sy');
              },
            };
          },
        },
      ],
      align: 'center',
      width: 170,
    },
    // 居住 商业
    {
      title: '私拉乱接电线',
      children: [
        {
          title: '隐患总数',
          dataIndex: 'slljdx',
          key: 'slljdx',
          width: 100,
          align: 'center',
          customCell: (row, index, column) => {
            let isNoHzyh = row.town !== '汇总' ? true : false;
            let style = 'cursor:pointer;text-decoration: underline; color: blue;';
            let isNoZero = row[column.key] !== 0 ? true : false;
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              onClick: async () => {
                getDetailYhData(row, index, column, isNoHzyh, isNoZero,'slljdx','私拉乱接电线','yh');
              },
            };
          },
        },
        {
          title: '整改数量',
          dataIndex: 'slljdx_zgcount',
          key: 'slljdx_zgcount',
          width: 100,
          align: 'center',
          customCell: (row, index, column) => {
            let isNoHzyh = row.town !== '汇总' ? true : false;
            let style = 'cursor:pointer;text-decoration: underline; color: blue;';
            let isNoZero = row[column.key] !== 0 ? true : false;
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              onClick: async () => {
                getDetailYhData(row, index, column, isNoHzyh, isNoZero,'slljdx','私拉乱接电线','zg');
              },
            };
          },
        },
        {
          title: '剩余总数',
          dataIndex: 'slljdx_sycount',
          key: 'slljdx_sycount',
          width: 100,
          align: 'center',
          customCell: (row, index, column) => {
            let isNoHzyh = row.town !== '汇总' ? true : false;
            let style = 'cursor:pointer;text-decoration: underline; color: blue;';
            let isNoZero = row[column.key] !== 0 ? true : false;
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              onClick: async () => {
                getDetailYhData(row, index, column, isNoHzyh, isNoZero,'slljdx','私拉乱接电线','sy');
              },
            };
          },
        },
      ],
      align: 'center',
      width: 170,
    },
    //  商业
    {
      title: '灭火器未保持完好有效',
      children: [
        {
          title: '隐患总数',
          dataIndex: 'mhqwbcwhyx',
          key: 'mhqwbcwhyx',
          width: 100,
          align: 'center',
          customCell: (row, index, column) => {
            let isNoHzyh = row.town !== '汇总' ? true : false;
            let style = 'cursor:pointer;text-decoration: underline; color: blue;';
            let isNoZero = row[column.key] !== 0 ? true : false;
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              onClick: async () => {
                getDetailYhData(row, index, column, isNoHzyh, isNoZero,'mhqwbcwhyx','灭火器未保持完好有效','yh');
              },
            };
          },
        },
        {
          title: '整改数量',
          dataIndex: 'mhqwbcwhyx_zgcount',
          key: 'mhqwbcwhyx_zgcount',
          width: 100,
          align: 'center',
          customCell: (row, index, column) => {
            let isNoHzyh = row.town !== '汇总' ? true : false;
            let style = 'cursor:pointer;text-decoration: underline; color: blue;';
            let isNoZero = row[column.key] !== 0 ? true : false;
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              onClick: async () => {
                getDetailYhData(row, index, column, isNoHzyh, isNoZero,'mhqwbcwhyx','灭火器未保持完好有效','zg');
              },
            };
          },
        },
        {
          title: '剩余总数',
          dataIndex: 'mhqwbcwhyx_sycount',
          key: 'mhqwbcwhyx_sycount',
          width: 100,
          align: 'center',
          customCell: (row, index, column) => {
            let isNoHzyh = row.town !== '汇总' ? true : false;
            let style = 'cursor:pointer;text-decoration: underline; color: blue;';
            let isNoZero = row[column.key] !== 0 ? true : false;
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              onClick: async () => {
                getDetailYhData(row, index, column, isNoHzyh, isNoZero,'mhqwbcwhyx','灭火器未保持完好有效','sy');
              },
            };
          },
        },
      ],
      dataIndex: 'mhqwbcwhyx',
      key: 'mhqwbcwhyx',
      align: 'center',
      width: 170,
    },
    {
      title: '简易喷淋灭火系统未保持完好有效',
      children: [
        {
          title: '隐患总数',
          dataIndex: 'jyplmhxtwbcwhyx',
          key: 'jyplmhxtwbcwhyx',
          width: 100,
          align: 'center',
          customCell: (row, index, column) => {
            let isNoHzyh = row.town !== '汇总' ? true : false;
            let style = 'cursor:pointer;text-decoration: underline; color: blue;';
            let isNoZero = row[column.key] !== 0 ? true : false;
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              onClick: async () => {
                getDetailYhData(row, index, column, isNoHzyh, isNoZero,'jyplmhxtwbcwhyx','简易喷淋灭火系统未保持完好有效','yh');
              },
            };
          },
        },
        {
          title: '整改数量',
          dataIndex: 'jyplmhxtwbcwhyx_zgcount',
          key: 'jyplmhxtwbcwhyx_zgcount',
          width: 100,
          align: 'center',
          customCell: (row, index, column) => {
            let isNoHzyh = row.town !== '汇总' ? true : false;
            let style = 'cursor:pointer;text-decoration: underline; color: blue;';
            let isNoZero = row[column.key] !== 0 ? true : false;
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              onClick: async () => {
                getDetailYhData(row, index, column, isNoHzyh, isNoZero,'jyplmhxtwbcwhyx','简易喷淋灭火系统未保持完好有效','zg');
              },
            };
          },
        },
        {
          title: '剩余总数',
          dataIndex: 'jyplmhxtwbcwhyx_sycount',
          key: 'jyplmhxtwbcwhyx_sycount',
          width: 100,
          align: 'center',
          customCell: (row, index, column) => {
            let isNoHzyh = row.town !== '汇总' ? true : false;
            let style = 'cursor:pointer;text-decoration: underline; color: blue;';
            let isNoZero = row[column.key] !== 0 ? true : false;
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              onClick: async () => {
                getDetailYhData(row, index, column, isNoHzyh, isNoZero,'jyplmhxtwbcwhyx','简易喷淋灭火系统未保持完好有效','sy');
              },
            };
          },
        },
      ],
      align: 'center',
      width: 170,
    },
    {
      title: '烟感报警器未保持完好有效',
      children: [
        {
          title: '隐患总数',
          dataIndex: 'ygbjwfwhyx',
          key: 'ygbjwfwhyx',
          width: 100,
          align: 'center',
          customCell: (row, index, column) => {
            let isNoHzyh = row.town !== '汇总' ? true : false;
            let style = 'cursor:pointer;text-decoration: underline; color: blue;';
            let isNoZero = row[column.key] !== 0 ? true : false;
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              onClick: async () => {
                getDetailYhData(row, index, column, isNoHzyh, isNoZero,'ygbjwfwhyx','烟感报警器未保持完好有效','yh');
              },
            };
          },
        },
        {
          title: '整改数量',
          dataIndex: 'ygbjwfwhyx_zgcount',
          key: 'ygbjwfwhyx_zgcount',
          width: 100,
          align: 'center',
          customCell: (row, index, column) => {
            let isNoHzyh = row.town !== '汇总' ? true : false;
            let style = 'cursor:pointer;text-decoration: underline; color: blue;';
            let isNoZero = row[column.key] !== 0 ? true : false;
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              onClick: async () => {
                getDetailYhData(row, index, column, isNoHzyh, isNoZero,'ygbjwfwhyx','烟感报警器未保持完好有效','zg');
              },
            };
          },
        },
        {
          title: '剩余总数',
          dataIndex: 'ygbjwfwhyx_sycount',
          key: 'ygbjwfwhyx_sycount',
          width: 100,
          align: 'center',
          customCell: (row, index, column) => {
            let isNoHzyh = row.town !== '汇总' ? true : false;
            let style = 'cursor:pointer;text-decoration: underline; color: blue;';
            let isNoZero = row[column.key] !== 0 ? true : false;
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              onClick: async () => {
                getDetailYhData(row, index, column, isNoHzyh, isNoZero,'ygbjwfwhyx','烟感报警器未保持完好有效','sy');
              },
            };
          },
        },
      ],
      align: 'center',
      width: 170,
    },
  ];
  // 计算总数的方法
  function vtotal(arr: any, item: any) {
    let total = arr.reduce((pre: any, cur: any) => {
      return parseInt(pre) + parseInt(cur[item]);
    }, 0);
    return total;
  }
  // 计算属性，用于实时更新数据到页面上
  const computedTableColumn = computed(() => {
    let newColumn: any = [];
    newColumn = columns;
    return newColumn;
  });
  const computedTableData = computed(() => {
    console.log(tableSource.value);
    return tableSource.value;
  });
  const getTitle = computed(() => {
    // let str = `【${props.currentXzqdmname} 】-- ${props.currentTitle}`;
    let str = `【${props.currentTitle}】的隐患情况统计`;
    if (str.length > 50) {
      str = str.substring(0, 50) + '...';
    }
    return str;
  });
  const getTipTitle = computed(() => {
    let str = `${props.currentTitle}`;
    return str;
  });
  watch(
    () => props.visible,
    (newVal, oldVal) => {
      // console.log(`visible 变化了，新值：${newVal}，旧值：${oldVal}`);
      // 在这里执行你需要的操作
      if (newVal) {
        getTableData();
      }
    },
  );
  const getTableData = async () => {
    let params: any = {
      pageindex: pageIndex.value,
      pagesize: pageSize.value,
      ...props.detailParams,
    };
    loading.value = true;
    let res = await getCheckTownshipYhList(params);
    loading.value = false;

    let yhtotal = vtotal(res.items, 'yhtotal');
    let zgtotal = vtotal(res.items, 'zgtotal');
    let sytotal = vtotal(res.items, 'sytotal');

    let use_electric_bicycle_count = vtotal(res.items, 'use_electric_bicycle');
    let use_bottled_liquefied_gas_count = vtotal(res.items, 'use_bottled_liquefied_gas');
    let use_stacked_items_count = vtotal(res.items, 'use_stacked_items');
    let index_count = res.items.length + 1;
    let mhqwbcwhyx_count = vtotal(res.items, 'mhqwbcwhyx');
    let jyplmhxtwbcwhyx_count = vtotal(res.items, 'jyplmhxtwbcwhyx');
    let ygbjwfwhyx_count = vtotal(res.items, 'ygbjwfwhyx');
    let slljdx_count = vtotal(res.items, 'slljdx');

    let use_electric_bicycle_count_zgcount = vtotal(res.items, 'use_electric_bicycle_zgcount');
    let use_bottled_liquefied_gas_count_zgcount = vtotal(
      res.items,
      'use_bottled_liquefied_gas_zgcount',
    );
    let use_stacked_items_count_zgcount = vtotal(res.items, 'use_stacked_items_zgcount');
    let mhqwbcwhyx_count_zgcount = vtotal(res.items, 'mhqwbcwhyx_zgcount');
    let jyplmhxtwbcwhyx_count_zgcount = vtotal(res.items, 'jyplmhxtwbcwhyx_zgcount');
    let ygbjwfwhyx_count_zgcount = vtotal(res.items, 'ygbjwfwhyx_zgcount');
    let slljdx_count_zgcount = vtotal(res.items, 'slljdx_zgcount');

    let use_electric_bicycle_count_sycount = vtotal(res.items, 'use_electric_bicycle_sycount');
    let use_bottled_liquefied_gas_count_sycount = vtotal(
      res.items,
      'use_bottled_liquefied_gas_sycount',
    );
    let use_stacked_items_count_sycount = vtotal(res.items, 'use_stacked_items_sycount');
    let mhqwbcwhyx_count_sycount = vtotal(res.items, 'mhqwbcwhyx_sycount');
    let jyplmhxtwbcwhyx_count_sycount = vtotal(res.items, 'jyplmhxtwbcwhyx_sycount');
    let ygbjwfwhyx_count_sycount = vtotal(res.items, 'ygbjwfwhyx_sycount');
    let slljdx_count_sycount = vtotal(res.items, 'slljdx_sycount');

    let tallObj = {
      town: '汇总',
      yhtotal: yhtotal,
      zgtotal: zgtotal,
      sytotal: sytotal,
      use_electric_bicycle: use_electric_bicycle_count,
      use_bottled_liquefied_gas: use_bottled_liquefied_gas_count,
      use_stacked_items: use_stacked_items_count,
      index: index_count,
      mhqwbcwhyx: mhqwbcwhyx_count,
      jyplmhxtwbcwhyx: jyplmhxtwbcwhyx_count,
      ygbjwfwhyx: ygbjwfwhyx_count,
      slljdx: slljdx_count,

      use_electric_bicycle_zgcount: use_electric_bicycle_count_zgcount,
      use_bottled_liquefied_gas_zgcount: use_bottled_liquefied_gas_count_zgcount,
      use_stacked_items_zgcount: use_stacked_items_count_zgcount,
      mhqwbcwhyx_zgcount: mhqwbcwhyx_count_zgcount,
      jyplmhxtwbcwhyx_zgcount: jyplmhxtwbcwhyx_count_zgcount,
      ygbjwfwhyx_zgcount: ygbjwfwhyx_count_zgcount,
      slljdx_zgcount: slljdx_count_zgcount,

      use_electric_bicycle_sycount: use_electric_bicycle_count_sycount,
      use_bottled_liquefied_gas_sycount: use_bottled_liquefied_gas_count_sycount,
      use_stacked_items_sycount: use_stacked_items_count_sycount,
      mhqwbcwhyx_sycount: mhqwbcwhyx_count_sycount,
      jyplmhxtwbcwhyx_sycount: jyplmhxtwbcwhyx_count_sycount,
      ygbjwfwhyx_sycount: ygbjwfwhyx_count_sycount,
      slljdx_sycount: slljdx_count_sycount,
    };

    tableSource.value = [...res.items, tallObj];
    total.value = res.total;

    // console.log('@resqqq', list);
  };
  //  调用 父组件传过来的方法
  const emit = defineEmits(['close']);
  // 导出
  const getDetailData = async (
    row: any,
    index: number,
    column: any,
    isNoHzyh: boolean,
    isNoZero: boolean,
  ) => {
    if (isNoHzyh && isNoZero) {
      let params: any = {
        town: row.town,
        ...props.detailParams,
      };
      vdetailParams.value = params;
      let current: any = {
        title: row.town,
        xzq: row.xzq,
      };
      v_currentTitle.value = current;
      showDrawer();
    }
  };
  const getDetailYhData = async (
    row: any,
    index: number,
    column: any,
    isNoHzyh: boolean,
    isNoZero: boolean,
    check_id: string,
    check_name: string,
    type: string,
  ) => {
    if (isNoHzyh && isNoZero) {
      let params: iParams = {
        check_id: check_id,
        xzqdm: row.xzqdm,
        towndm: row.towndm,
        type: type,
      };
      yhdetailParams.value = params;
      console.log('参数：', yhdetailParams.value);
      let current: any = {
        title: check_name,
        type: type,
      };
      yhcurrentTitle.value = current;
      showyhDrawer();
    }
  };
  function showyhDrawer() {
    yhvisible.value = true;
  }
  // 打开抽屉
  function showDrawer() {
    vvisible.value = true;
  }
  const handleVillageClose = () => {
    vvisible.value = false;
  };
  function handleyhClose() {
    yhvisible.value = false;
  }
  const handleClose = () => {
    emit('close');
    pageIndex.value = 1;
    pageSize.value = 15;
    vvisible.value = false;
  };
  function handleExport() {
    const uriBase = `${globSetting.apiBaseUrl}${globSetting.apiUrl}`;
    const tk = userStore.getToken;
    downloadByUrl({
      url:
        uriBase +
        '/export/static/yhExport?access_token=' +
        tk +
        '&category=jc&levle=town&xzqdm=' +
        props.detailParams.xzqdm,
      target: '_blank',
    });
  }
  // 切换页码的时候更新  pageIndex 和  pageSize
  const onShowSizeChange = (pageIndex: number, pageSize: number) => {
    // antDesign  自动给  pageIndex 和 pageSize 赋值
    // pageIndex.value = pageIndex;
    // pageSize.value = pageSize;
    // console.log('@pageIndex,pageSize', pageIndex, pageSize);
  };
  watch(pageSize, () => {
    // console.log('pageSize', pageSize.value);
    getTableData();
  });
  watch(pageIndex, () => {
    // console.log('current', pageIndex.value);
    getTableData();
  });
  onMounted(() => {
    getTableData();
  });
</script>
<style lang="less" scoped>
  .tp-box {
    height: 100%;
  }
  .title-detail {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .pagination {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
  }
</style>
